<template>
  <div class="page">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body">
              <div class="layui-form" lay-filter="">
                <div class="layui-form-item">
                  <label class="layui-form-label">套餐名称</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="name"
                      placeholder="输入套餐名称"
                      v-model="itemData.name"
                      autocomplete="off"
                      class="layui-input a"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">套餐图片</label>
                    <div class="layui-input-inline">
                      <div class="layui-upload">
                        <button
                          type="button"
                          class="layui-btn"
                          id="layuiadmin-upload-useradmin"
                        >
                          选择图片
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">图片预览</label>
                    <div class="layui-input-inline" style="width: 180px;">
                      <img
                        id="img"
                        :src="
                          itemData.logo
                            ? itemData.logo
                            : require('@/assets/zwyl.jpg')
                        "
                        style="width:100px;height:100px;"
                      />
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">人均消费</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="number"
                      name="perConsumptionPrice"
                      placeholder=""
                      v-model="itemData.perConsumptionPrice/100"
                      autocomplete="off"
                      class="layui-input a"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">门市价</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="number"
                      name="basePrice"
                      placeholder=""
                      v-model="itemData.basePrice/100"
                      autocomplete="off"
                      class="layui-input a"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">行业类别</label>
                  <div class="layui-input-inline">
                    <select name="categoryId" lay-filter="categoryId" v-model="itemData.categoryId">
                      <option value="">请选择</option>
                      <option v-for="item in categorylist" :value="item.id">{{item.name}}</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">参与门店</label>
                  <div class="layui-input-inline">
                    <select name="shopId" lay-filter="shopId" v-model="itemData.shopId">
                      <option v-for="item in shoplist" :value="item.id">{{item.name}}</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">购买须知</label>
                  <div class="layui-input-block" >
                  	<textarea class="textarea" name="introduction" maxlength="200" placeholder="请输入购买须知(限200)">{{itemData.projectDescription.introduction}}</textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">详情</label>
                  <div class="layui-input-block" >
                  	<textarea  class="textarea"  name="consumerGuide" maxlength="200" placeholder="请输入详情(限200)">{{itemData.projectDescription.consumerGuide}}</textarea>
                  </div>
                </div>
                <div class="layui-form-item" >
                  <label class="layui-form-label">开始日期</label>
                  <div class="layui-input-block" style="width: 190px;" id="test3">
                    <input
                      type="text"                      
                      name="createAt"
                      placeholder="开始日期"                     
                      autocomplete="off"
                      class="layui-input a"                     
                      disabled="disabled"
                    />
                  </div>
                </div>
                <div class="layui-form-item" >
                  <label class="layui-form-label">结束日期</label>
                  <div class="layui-input-block" style="width: 190px;" id="test4">
                    <input
                      type="text"
                      name="finishAt"
                      placeholder="结束日期"                                         
                      autocomplete="off"
                      class="layui-input a"                     
                       disabled="disabled"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">人数（人）</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="numberPeople"
                      placeholder="输入人数"
                      v-model="itemData.numberPeople"
                      autocomplete="off"
                      class="layui-input a"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">区域</label>
                  <div class="layui-input-block" style="width: 190px;">
                    <input
                      type="text"
                      name="areaId"
                      placeholder="请选择区域"
                      v-model="itemData.areaName"
                      autocomplete="off"
                      class="layui-input a"
                      
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <!--<label class="layui-form-label"></label>-->
                  <div class="layui-input-block">
                  	<textarea  class="textarea"  placeholder="填写活动地址" >{{itemData.activityAddress}}</textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">图片展示</label>
                  <div class="layui-input-block">
                    <div class="layui-upload">
                      <button type="button" class="layui-btn" id="test2">多图片上传</button>
                      <button type="button" class="layui-btn layui-btn-warm" @click="delimg">清除图片</button>
                      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">预览图：
                      <div class="layui-upload-list" style="width: 100%;" id="demo2">
                      	<ul>
                      		<li style="display:inline-block;margin-right:10px;" v-for='item in createItemPictureList'>
                      			<img width="100" height="100" :src='item.pictureUrl'>
                      			<input type="text"  style="display:block;width:98px;height:30px;margin-top:10px;border:1px solid #ccc;text-align: center;">
                      		</li>
                      	</ul>
                      	
                      </div>
                      </blockquote>
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button
                      class="layui-btn layui-btn-normal"
                      lay-submit
                      lay-filter="setmyinfo"
                      @click="confirmOk"
                    >
                      确认
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "taocanadd",
  data() {
    return {
      dealerId: localStorage.getItem("dealerId"),      
      createItemPictureList:[],//多图（图片展示）
      categorylist:'',//行业类别
      shoplist:'',//参与门店     
      itemData: {
        name: "", //商品名称
        logo: "", //商品图片
        createAt:'',
        finishAt:'',
        shopId:localStorage.getItem("shopId"),
        projectId:"",//localStorage.getItem("projectId"),
        categoryId:'',
        projectDescription:{
        	introduction:'',
        	consumerGuide:'',
        	pic:'',
        }
      }
    }
  },
  mounted() {
    var _this = this;
    window.getdates = this.getdates;
    layui.use('layedit', function(){
		  var layedit = layui.layedit;
		  layedit.set({
			  uploadImage: {
			    url: imguploadurl,
			    type: 'post',
          data:{
          	type:3
          }
			  }
			});
			_this.layedit=layui.layedit
		  var index=layedit.build('demo');
		  _this.layeditindex=index;
		});
    layui.use("upload", function() {
      var upload = layui.upload;
      var uploadInst = upload.render({
        elem: "#layuiadmin-upload-useradmin", //绑定元素
        data: {
          type: 2
        },
        url:imguploadurl, //上传接口
        done: function(res) {
          layer.msg("上传成功");
          _this.itemData.logo = res.msg;
        },
        error: function() {
          layer.msg("上传失败");
        }
      });
      
      upload.render({
        elem: "#test2",
        data: {
          type: 2
        },
        url: "http://storage.g2ma.com/imgUpload/multi",
        multiple: true,
        before: function(obj) {},
        done: function(res,index) {
          layer.msg("上传成功");
          var img = _this.createItemPictureList;
          var obj={
	            pictureUrl:res.msg,	          
	          }
          img.push(obj)
          _this.createItemPictureList =img;
          
        }
        
      });
    });
    layui.use('laydate', function () {
      var laydate = layui.laydate;
      laydate.render({
        elem: '#test3'
        , type: 'datetime'
        , done: function (value) {
          _this.itemData.createAt = value;
          // var value = getsjc(value);
        }
      });
      laydate.render({
        elem: '#test4'
        , type: 'datetime'
        , done: function (value) {
          _this.itemData.finishAt = value;
          // var value = getsjc(value);
          // alert(value);
        }
      });
    })
    this.getshop(); //参与门店
    this.getcategory(); //行业类别
    
  },
  methods: {
    getdates: function(data) {
      //回选详情
      var _this = this;
      _this.projectId= data.id;
      var url="/verify/papi/v1.9/project/"+ _this.projectId 
      ajaxRequest(url, "GET", "json", "", function(ret, err) {
//        alert("///"+JSON.stringify(ret))
        _this.itemData = ret.data;
        $("input[name='createAt']").val(FormatDate(ret.data.createAt,3));
        $("input[name='finishAt']").val(FormatDate(ret.data.finishAt,3));
        _this.createItemPictureList=ret.data. projectDescription.pic //图片展示
      });
    },
    getshop: function() {
      var _this = this;     
//    var url = "/store/getDealerAllShop?dealerId="+_this.dealerId;
      var url = "/shop/papi/v1.9/shops?dealerId.equals="+_this.dealerId + '&page=0&size=100';
      ajaxRequest(url, "GET", "json", '', function(ret, err) {
      	//alert("///"+JSON.stringify(ret))
        _this.shoplist = ret.data.list;
        _this.itemData.shopId = ret.data.list[0].id;       
      });
    },
    getcategory: function() {
      var _this = this;
//    var shopId = _this.itemData.shopId;
      var dates={
    	    "status.equals":'DISABLE'
    	}        	
			var url="/verify/papi/v1.9/project/list/category"
      ajaxRequest(url, "GET", "json", dates, function(ret, err) {
        _this.categorylist = ret.data;
        _this.itemData.categoryId= ret.data[0].id;
      });
    },    
    delimg: function() {
      this.createItemPictureList=[];
    },
    confirmOk: function() {
      var _this = this;
      var len = $(".a").length;
      for (var i = 0; i < len; i++) {
        if (
          $(".a")
            .eq(i)
            .val() == "" ||
          $(".a")
            .eq(i)
            .val() <= 0
        ) {
          var msg = $(".a")
            .eq(i)
            .attr("placeholder");
          layer.msg("请输入正确的" + msg);
          return;
        }
      }
      var createAt=$("input[name='createAt']").val();
      var finishAt=$("input[name='finishAt']").val(); 
      _this.itemData.createAt = getsjc(createAt);
      _this.itemData.finishAt = getsjc(finishAt);
      var categoryId=_this.itemData.categoryId
      if (!_this.itemData.categoryId) {
        layer.msg("请选择行业类别");
        return false;
      }
      if (!_this.itemData.logo) {
        layer.msg("请上传商品图片");
        return false;
      }
      //		if(!this.itemData.detailcontent){
      //			layer.msg('请上传商品详情图片');
      //			return false;
      //		}
      if (_this.projectId) {
        //编辑
        var hat = "PUT";           
        var projectDescription={
            consumerGuide:consumerGuide,
            introduction:introduction,
            pic:_this.createItemPictureList, 
        }
        var dates = {
        	id:_this.projectId,//api.pageParam.title.id,
          name: _this.itemData.name,
          logo: _this.itemData.logo, //logo
          shopId: _this.itemData.shopId,
          category: _this.itemData.categoryId, //行业类别          
          activeStatus:_this.itemData.activeStatus,                    	                     
	        perConsumptionPrice:_this.itemData.perConsumptionPrice*100,
	        projectDescriptionDTO:projectDescription,
	        basePrice:_this.itemData.basePrice*100,
	       // createAt:_this.itemData.createAt,
	        startAt:_this.itemData.createAt,
	        finishAt:_this.itemData.finishAts,	       	                                                               
	        numberPeople:_this.itemData.numberPeople, 
	        areaId:areaId,//区域
	        latitude:latitude,
	        longitude:longitude,
	        startAt:startAts, //套餐有效时间	              
	        activityAddress:_this.itemData.activityAddress, //地址
	        category:{id:categoryId},//行业	       
	       // businessType:{id:buytypeId},//套餐类型 
	        businessType:{id:4},
	        ascription:'DEALER'
         
        };        
      }
//        alert(JSON.stringify(dates))          
      var url = "/verify/bapi/v1.9/project";                                    
      ajaxRequest(url,hat,'json',dates,function(ret,err){               
        layer.msg("操作成功");
        setTimeout(function() {
          // _this.$router.push({ path: '/shopmallList' })
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
          parent.location.reload();
        }, 1000);
      });
    }
  },
  updated: function() {
    var _this = this;
    layui.use("form", function() {
      var form = layui.form;
      form.render();
      form.on("select(categoryId)", function(data) {
        //行业类别
        _this.itemData.categoryId = data.value;
      });          
      form.on("select(shopId)", function(data) {
        //门店
        _this.itemData.shopId = data.value;
      });
    });
  }
};
</script>
<style>
#J_imageView img {
  width: 400px;
  display: block;
}
.fllist ul {
  display: inline-block;
  width: 20%;
  height: 250px;
  margin-right: 1%;
  overflow: hidden;
  overflow-y: scroll;
  border: 1px solid #eee;
}
.fllist ul li {
  height: 30px;
  line-height: 30px;
  padding: 5px 20px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.fllist ul li.cur {
  background-color: #3276df;
  color: #fff;
}
#demo2 img {
  display: inline-block;
  margin-right: 10px;
  width: 100px;
  height: 100px;
}
.textarea{display:block;width:400px;height:50px;border:1px solid #F1f1f1;padding:5px;}
</style>
